 <template lang="html">
  <div class="">
    <div class="search">
        <div class="input">
            <p>
                <label>筛选：</label>
                    仓库联系人：<el-input placeholder="请输入联系人姓名" v-model="searchData.contactName" ></el-input>&nbsp;&nbsp;
                    仓库联系人电话：<el-input placeholder="请输入联系人电话号码" v-model="searchData.contactTel"> </el-input>&nbsp;&nbsp;
                    配送地址：<el-select placeholder="请选择配送地址"  v-model="searchData.radsId">
                        <el-option value=''>请选择</el-option>
                            <el-option
                                v-for="(item,key) in pageData.district"
                                :key="key"
                                :value='item.id'
                                :label="item.districtName"
                            >
                        </el-option>
                </el-select>&nbsp;&nbsp;
            </p>
            <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
      <el-button type="primary" @click="add">新增地址</el-button>
      <!-- <el-button type="danger" @click="del">批量删除</el-button> -->
    </div>
    <tableVue :list="list" :state="true" v-loading="pageData.loading" :total="pageData.total"  @changeData="selectionVal" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="compile(scope.row)">编辑
                </el-button>
                 <el-button
                  size="mini"
                  type="danger"
                  @click="del(scope.row)">删除
                </el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
     <dialogVue title="操作" :dialog="pageData.dialog" @close="closeWin" :state="false">
         <slot>
            <el-form :model="pageData.listData" ref="takeData" :rules="rules" label-width="120px" class="demo-ruleForm">
                <el-form-item label="仓库地址：" prop="contactAddress">
                      <el-input v-model="pageData.listData.contactAddress" type="textarea" placeholder="请输入仓库地址" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="仓库联系人:" prop="contactName">
                      <el-input v-model="pageData.listData.contactName" placeholder="请输入仓库联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" prop="contactTel">
                      <el-input v-model="pageData.listData.contactTel" placeholder="请输入联系电话"> </el-input>
                </el-form-item>
                 <el-form-item label="仓库名称:" prop="addressIns">
                      <el-input v-model="pageData.listData.addressIns" placeholder="请输入仓库名称"></el-input>
                </el-form-item>
                <el-form-item class="confirm">
                    <el-button type="primary" v-if="pageData.btnState=='1'" @click="upForm('POST')">确定</el-button>
                    <el-button type="primary" v-if="pageData.btnState=='2'" @click="upForm('PUT')">更新</el-button>
                </el-form-item>
            </el-form>
         </slot>
     </dialogVue>
  </div>
</template>

<script>
  import Data from './warehouseAddData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import { staffList } from '@/api/staff/staff'
  import {
    getAddressList,
    getRegionDetail,
    delRegion
  } from '@/api/warehouse/index'
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted(){
        this.getAddList();//获取地址列表 or 筛选

    },
    methods: {
        getAddList(data){ //获取地址列表
           getAddressList(data).then(res=>{ 
              if (res.data.code == 'OK') {
					this.pageData.loading =false;
					this.pageData.total = res.data.data.total;
					this.list.tbody = res.data.data.records.map(item=>{
                        item.gmtCreate = this.switchTime(item.gmtCreate)
                        item.gmtUpdate = this.switchTime(item.gmtUpdate)
                        return item;
					});
				}
           }) 
        },
        compile(data){ //编辑单条数据
            this.pageData.btnState ="2";
            this.pageData.dialog = true;
            this.$refs.takeData&&this.$refs.takeData.resetFields()
            this.pageData.listData.contactAddress = data.contactAddress;
            this.pageData.listData.contactName = data.contactName;
            this.pageData.listData.contactTel = data.contactTel;
            this.pageData.listData.addressIns = data.addressIns;
            this.pageData.listData.radsId =data.radsId;
           
        },
        regionDetails(data){
            console.log(data)
        },
        closeWin(){
            this.pageData.dialog = false;
        },
        add(){
            this.pageData.btnState ="1";
            this.pageData.dialog = true;
            this.$refs.takeData&&this.$refs.takeData.resetFields()
            this.pageData.listData = {};
            
        },
        upForm(method){//编辑单条列表数据 or 新增 
            this.$refs.takeData.validate((valid) => {
                if (valid) {
                    getRegionDetail(this.pageData.listData,method).then(res=>{
                        if(res.data.code=="OK"){
                            this.$message.success('修改成功！')
                            this.pageData.dialog = false;

                            this.getAddList();

                        }else{
                            this.$message.error(res.data.message)
                        }
                    })
                }
            })
        },
        search(){
            this.getAddList(this.searchData)
        },
        handSize(){

        },
        del(data){
            let param =[data.radsId]
            this.delMessage(()=>{
               delRegion(param,'DELETE').then(res=>{
                   if(res.data.code=="OK"){
                       this.$message.success('删除成功！')
                       this.getAddList();
                   }else{
                       this.$message.error(res.data.message)
                   }
               })
           })
        },
        selectionVal(){}
    }
  }	
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.region{
	width:120px;
}
</style>
